<template>
  <div v-loading="loading">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      class="dataForm"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('项目名称')" prop="dealId">
            <el-link
              class="anywhere"
              type="primary"
              :underline="false"
              @click="editForm"
            >
              {{ form.dealName }}
            </el-link>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('公司名称')" prop="companyName">
            <span slot="label"> {{ companyLabel }} </span>
            <template>
              <router-link
                target="_blank"
                :to="{
                  path: '/company/base/companyBaseHome',
                  query: { companyId: form.companyId },
                }"
                class="link_a anywhere"
              >{{ form.companyName }}</router-link>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('申请标题')" prop="actTitle">
            <el-input
              v-model="form.actTitle"
              :placeholder="$t('申请标题')"
              show-word-limit
              :maxlength="100"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('项目负责人')" prop="personCharge">
            <UserSelect
              v-model="form.personCharge"
              :placeholder="$t('项目负责人')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('项目类型')" prop="dealType">
            <dictSelect
              v-model="form.dealType"
              :clearable="true"
              dictionary="deal_type"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item :label="$t('聚焦行业')" prop="industryFocus">
            <dictSelect
              v-model="form.industryFocus"
              :clearable="true"
              dictionary="deal_industry_focus"
            />
          </el-form-item>
        </el-col>-->
        <el-col :span="12">
          <el-form-item
            :label="$t('预计投资时间')"
            prop="dateInvestmentEstimate"
          >
            <DatePicker
              v-model="form.dateInvestmentEstimate"
              :placeholder="$t('预计投资时间')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('预计投资金额') + $t('金额单位')"
            prop="amountInvestmentEstimate"
          >
            <Money
              v-model="form.amountInvestmentEstimate"
              unit="w"
              :placeholder="$t('预计投资金额')"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!--股权投资字段-->
        <dealWfStorageEquityForm
          v-if="form.dealType === 'equity'"
          ref="dealWfStorageEquityForm"
          :equity-form="form.dealWfStorageEquity"
        />
        <!--债权投资字段-->
        <dealWfStorageDebtForm
          v-if="form.dealType === 'debt'"
          ref="dealWfStorageDebtForm"
          :equity-form="form.dealWfStorageDebt"
        />
        <!--参股基金字段-->
        <dealWfBfBaseForm
          v-if="form.dealType === 'bf' && form.dealWfBfBase !== null"
          ref="dealWfBfBaseForm"
          :bf-form="form.dealWfBfBase"
        />
        <!--地产项目 -->
        <dealBaseEstateForm
          v-if="form.dealType === 'estate' && form.dealWfStorageEstate !== null"
          ref="dealBaseEstateForm"
          :estate-form="form.dealWfStorageEstate"
        />
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('项目来源')" prop="dealSource">
            <el-input
              v-model="form.dealSource"
              :placeholder="$t('项目来源')"
              show-word-limit
              :maxlength="100"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('项目简介')" prop="dealIntroduction">
            <el-input
              v-model="form.dealIntroduction"
              type="textarea"
              :placeholder="$t('项目简介')"
              show-word-limit
              maxlength="2000"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('项目主要优点')" prop="dealStrongPoint">
            <el-input
              v-model="form.dealStrongPoint"
              type="textarea"
              :placeholder="$t('项目主要优点')"
              show-word-limit
              maxlength="2000"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('项目主要顾虑')" prop="dealScruple">
            <el-input
              v-model="form.dealScruple"
              type="textarea"
              :placeholder="$t('项目主要顾虑')"
              show-word-limit
              maxlength="2000"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!--签约主体-->
        <div v-loading="loading">
          <div style="margin-top: 15px">
            <div class="area-header">
              <span class="area-header-title">{{ $t("投资主体列表") }}</span>
            </div>
            <el-table
              :data="form.mainList"
              border
              class="nowrapTable formTable"
            >
              <el-table-column :label="$t('主体类型')" align="center">
                <template slot="header" slot-scope="{}">
                  <i style="color: #ff4949; margin-right: 4px">*</i>
                  <span>{{ $t("主体类型") }}</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop=" 'mainList.' + scope.$index + '.mainType' "
                    :rules="mainList.mainType"
                  >
                    <dictSelect
                      v-model="scope.row.mainType"
                      :clearable="true"
                      dictionary="deal_investment_type"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column :label="$t('主体名称')" align="center">
                <template slot="header" slot-scope="{}">
                  <i style="color: #ff4949; margin-right: 4px">*</i>
                  <span>{{ $t("主体名称") }}</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop=" 'mainList.' + scope.$index + '.mainName' "
                    :rules="mainList.mainName"
                  >
                    <MainBodySelect
                      v-model="scope.row.mainName"
                      :parameters="scope.row.mainType"
                      @change="changeInvestData"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column :label="$t('拟投资金额') + $t('金额单位')" align="center">
                <template slot="header" slot-scope="{}">
                  <i style="color: #ff4949; margin-right: 4px">*</i>
                  <span>{{ $t('拟投资金额') + $t('金额单位') }}</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop=" 'mainList.' + scope.$index + '.investmentAmount' "
                    :rules="mainList.investmentAmount"
                  >
                    <Money v-model="scope.row.investmentAmount" unit="w" :placeholder="$t('投资金额')" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column :label="$t('拟投资时间')" align="center">
                <template slot="header" slot-scope="{}">
                  <i style="color: #ff4949; margin-right: 4px">*</i>
                  <span>{{ $t("拟投资时间") }}</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop=" 'mainList.' + scope.$index + '.investmentDate' "
                    :rules="mainList.investmentDate"
                  >
                    <el-date-picker
                      v-model="scope.row.investmentDate"
                      type="date"
                      placeholder="选择日期"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                v-if="!otherBtnHide"
                :label="$t('操作')"
                align="center"
                width="90px"
              >
                <template slot-scope="scope">
                  <!-- v-hasPermi="['deal:contract:remove']" -->
                  <el-button
                    size="small"
                    type="text"
                    icon="el-icon-delete"
                    @click="delMain(scope.$index, scope.row)"
                  />
                </template>
              </el-table-column>
            </el-table>
            <div v-if="!otherBtnHide" class="tol">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="addPaymentPay"
              >{{ $t("添加") }}</el-button>
            </div>
          </div>
        </div>
      </el-row>
      <!-- 附件列表 -->
      <FileTable
        :list.sync="form.fileList"
        data-type="deal_process"
        :business-id="form.dealId"
        :btn-show="!otherBtnHide"
        :hidden-type-flag="true"
      />
    </el-form>
    <!-- 添加或修改项目基本信息对话框 -->
    <el-dialog
      :title="$t('项目基本信息')"
      :visible.sync="formOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      custom-class="dialogForm"
      append-to-body
    >
      <dealBaseForm ref="dealBaseForm" />
    </el-dialog>
  </div>
</template>

<script>

    // 债权项目
    import dealWfStorageDebtForm from '@/views/deal/form/dealWfStorageDebtForm'
    // 股权项目
    import dealWfStorageEquityForm from '@/views/deal/form/dealWfStorageEquityForm'
    // 参股基金
    import dealWfBfBaseForm from '@/views/bf/base/dealWfBfBaseForm'
    // 地产项目
    import dealBaseEstateForm from '@/views/deal/base/estate/dealBaseEstateForm'
    import dealBaseForm from '@/views/deal/base/dealBaseForm.vue'
    import { saveDealWfStorage, getDealWfStorage, getByWfNodeId, delDealWfStorageInvestment } from '@/api/deal/form/dealWfStorage'
   import MainBodySelect from '@/components/MainBodySelect/index'

    export default {
      components: {
        dealWfStorageEquityForm,
        dealWfStorageDebtForm,
        dealBaseEstateForm,
        dealWfBfBaseForm,
        dealBaseForm,
        MainBodySelect
      },
      filters: {
        ellipsis(value) {
          if (!value) return ''
          if (value.length > 15) {
            return value.slice(0, 15) + '...'
          }
          return value
        }
      },
      data() {
          return {
              // 表单参数
              form: {
                dealWfBfBase: {
                  bfPhaseList: []
                },
                dealWfStorageEstate: {},
                mainList: []
              },
              // 遮罩层
              loading: false,
              // 是否隐藏保存按钮
              otherBtnHide: false,
              // 公司名称label
              companyLabel: '公司名称',
              formOpen: false,
              // 表单校验
              rules: {
                actTitle: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
                dealType: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
                personCharge: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }]

              },
               mainList: {
                 mainType: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
                 mainName: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
                 investmentAmount: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
                 investmentDate: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }]
              }
          }
      },
      created() {
        this.$bus.$emit('async_done')
      },
      methods: {
        dealTypeChange(val) {
          if (val === 'equity') {
            this.companyLabel = this.$t('公司名称')
          } else if (val === 'debt') {
            this.companyLabel = this.$t('融资方名称')
          } else if (val === 'bf') {
            this.companyLabel = this.$t('基金名称')
          } else if (val === 'estate') {
            this.companyLabel = this.$t('项目名称')
          }
          this.$forceUpdate()
        },
          // 初始化数据
          init(data) {
            this.loading = true
              if (data != null && data.id !== undefined) {
                  getDealWfStorage(data.id).then(response => {
                    this.form = response.data
                    this.loading = false
                    this.$nextTick(() => {
                      this.dealTypeChange(this.form.dealType)
                    })
                  })
              } else {
                  getByWfNodeId(data.wfNodeId).then(response => {
                    this.form = response.data
                    if (data !== null) {
                      this.form.fileList = data.fileList
                      this.form.actTitle = data.actTitle
                    }

                    this.loading = false
                    this.$nextTick(() => {
                      this.dealTypeChange(this.form.dealType)
                    })
                  })
              }
          },
          // 表单重置
          reset() {
            this.form = {
              id: undefined,
              dealId: undefined,
              dealName: undefined,
              actTitle: undefined,
              companyId: undefined,
              personCharge: undefined,
              dealType: undefined,
              industryFocus: undefined,
              dealSource: undefined,
              dateInvestmentEstimate: undefined,
              amountInvestmentEstimate: undefined,
              dealIntroduction: undefined,
              dealStrongPoint: undefined,
              dealScruple: undefined,
              // 参股基金字段
              dealWfBfBase: {
                bfPhaseList: []
              },
              dealWfStorageEquity: {}, // 股权项目字段
              // 债权项目字段
              dealWfStorageDebt: {
                issued: {
                  id: undefined, // 发行主体ID
                  companyName: undefined // 发行主体名称
                }
              },
              dealWfStorageEstate: {
                projectLocation: undefined,
                detailedAddress: undefined,
                propertyType: undefined,
                businessType: undefined
              },
              fileList: [],
              mainList: []
            }
              this.resetForm('form')
          },
          // 取消按钮
          cancel() {
              this.$parent.$parent.formOpen = false
              this.$parent.$parent.reset()
          },
          /** 提交按钮 */
          submitForm: function() {
            return new Promise((resolve, reject) => {
              this.$refs['form'].validate(valid => {
                if (valid) {
                  this.loading = true
                  this.form.fileList.forEach(item => {
                    item.directoryId = '11e99d1d45b24eeb858a234b72197920'
                  })
                  saveDealWfStorage(this.form).then(response => {
                    if (response.code === 200) {
                      this.msgSuccess(this.$t('保存成功'))
                      this.loading = false
                      resolve(response.data.id)
                    } else {
                      this.msgError(response.msg)
                      this.loading = false
                      reject(response)
                    }
                  }).catch(() => {
                    this.loading = false
                  })
                } else {
                  this.locationError(document)
                  reject()
                }
              })
            })
          },
        editForm() {
          this.formOpen = true
          this.$nextTick(() => {
            this.$refs.dealBaseForm.openLocation = 'bfHome'
            this.$refs.dealBaseForm.init(this.$route.query)
          })
        },
        // 删除行
      delMain(index, row) {
         const id = row.id
      if (id !== undefined && id !== '' && id != null) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        })
          .then(() => {
            // 调用接口
            delDealWfStorageInvestment(id)
            this.form.mainList.splice(index, 1)
            return this.msgSuccess(this.$t('删除成功'))
          })
          .catch(function() {})
      } else {
        this.form.mainList.splice(index, 1)
      }
      },
        changeInvestData(svalue, name) {
          console.log(svalue, name)
        },
        addPaymentPay() {
           const row = {
              id: undefined,
              mainType: '',
              mainName: '',
              investmentAmount: '',
              investmentDate: ''

            }
            if (!(this.form.mainList instanceof Array)) {
              this.$set(this.form, 'mainList', [])
            }
            this.$nextTick(() => {
              this.form.mainList.push(row)
            })
        }
      }
    }
</script>
